<template>
	<div class="app-container">
		<el-form :inline="true" :model="searchFrom" class="demo-form-inline">
			<el-form-item  label="名称">
				<el-input v-model="searchFrom.tfName" placeholder="名称"></el-input>
			</el-form-item>
			<el-form-item  label="编号">
				<el-input v-model="searchFrom.tfCode" placeholder="编号"></el-input>
			</el-form-item>
			<el-form-item v-if="moreSearch" label="流程实例ID">
				<el-input v-model="searchFrom.tfProcessInstanceId" placeholder="流程实例ID"></el-input>
			</el-form-item>
			<el-form-item v-if="moreSearch" label="流程状态名称">
				<el-input v-model="searchFrom.tfProcessState" placeholder="流程状态名称"></el-input>
			</el-form-item>
			<el-form-item label="更多">
				<el-switch v-model="moreSearch" @change="moreChange">
				</el-switch>
			</el-form-item>
			<el-form-item style="float: right;">
				<el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
				<el-button type="primary" v-permission="'flowable:testFlowable:insert'" @click="addTestFlowable"><i class="el-icon-plus" />新增</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
			<el-table-column v-for="item in tableColumn" :key="item.field" align="center" :label="item.title" :width="item.width">
				<template slot-scope="{row}">
					<template v-if="item.type == 'select'">
						<span>{{ translation[item.field][row[item.field]] }}</span>
					</template>
					<template>
						<span>{{ row[item.field] }}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button v-permission="'flowable:testFlowable:update'" icon="el-icon-edit" type="primary" size="mini" @click="editTestFlowable(scope.$index, scope.row)">编辑</el-button>
					<el-button v-permission="'flowable:testFlowable:delete'" icon="el-icon-delete" size="mini" type="danger" @click="deleteTestFlowable(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="pageSizeChange" @current-change="currentPageChange" :current-page="page.currentPage"
		 :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
		 background>
		</el-pagination>
		<el-dialog width="40%" title="信息" :visible.sync="testFlowableAddFormVisible" center>
			<testFlowableEdit :testFlowableInfo="testFlowableInfo" />
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" icon="el-icon-close" @click="testFlowableAddFormVisible = false">取 消</el-button>
				<el-button icon="el-icon-check" type="primary" @click="save">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import request from '@/utils/request'
	import permission from '@/directive/permission/index.js' // 权限判断指令
	import testFlowableEdit from '@/views/flowable/test-flowable/test-flowable-edit.vue'
	export default {
		name: 'testFlowableList',
		components: {
			testFlowableEdit
		},
		directives: {
			permission
		},
		data() {
			return {
				//更多检索条件
				moreSearch: true,
				//弹窗是否可见
				testFlowableAddFormVisible: false,
				//搜索表单
				searchFrom: {
					pageNo: 1,
					pageSize: 10
				},
				//表的下拉数据
				tableList: [],
				//正在编辑的用户信息
				testFlowableInfo: {
					tfId: "",
					tfName: "",
					tfCode: "",
					tfProcessInstanceId: "",
					tfProcessState: "",
				},
				//表头
				tableColumn: [{
						field: 'tfId',
						title: 'ID',
					},
					{
						field: 'tfName',
						title: '名称',
					},
					{
						field: 'tfCode',
						title: '编号',
					},
					{
						field: 'tfProcessInstanceId',
						title: '流程实例ID',
					},
					{
						field: 'tfProcessState',
						title: '流程状态名称',
					},
				],
				//数据转译
				translation: {},
				//所有的下拉选项
				options: {},
				//查询方式列表
				listLoading: false,
				//数据列表
				list: null,
				//分页相关参数
				page: {
					pageSizes: [10, 20, 50, 100],
					pageSize: 10,
					total: 0,
					currentPage: 1
				}
			}
		},
		//页面初始化加载
		created() {
			this.getList();
		},
		methods: {
			//查询列表
			getList() {
				this.searchFrom['pageNo'] = this.page.currentPage
				this.searchFrom['pageSize'] = this.page.pageSize
				request({
					url: '/flowable/testFlowable/queryByPage',
					method: 'post',
					data: this.searchFrom
				}).then(response => {
					this.list = response.data.list
					this.page.total = response.data.total
					this.page.currentPage = response.data.pageNum
				})
			},
			//保存用户信息
			save() {
				var url = '/flowable/testFlowable/insert';
				if (this.testFlowableInfo.tfId) {
					url = '/flowable/testFlowable/update';
				}
				request({
					url: url,
					method: 'post',
					data: this.testFlowableInfo
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.testFlowableAddFormVisible = false;
				})
			},
			//添加
			addTestFlowable() {
				this.testFlowableInfo = {};
				this.testFlowableAddFormVisible = true;
			},
			//编辑
			editTestFlowable(index, row) {
				this.testFlowableInfo = {
					tfId: "",
					tfName: "",
					tfCode: "",
					tfProcessInstanceId: "",
					tfProcessState: "",
				}
				this.testFlowableInfo = row;
				this.testFlowableAddFormVisible = true;
			},
			//删除用户
			deleteTestFlowable(index, row) {
				this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.confirmDelete(row)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//确认删除操作
			confirmDelete(row) {
				var url = '/flowable/testFlowable/delete';
				request({
					url: url,
					method: 'post',
					data: row
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.testFlowableAddFormVisible = false;
				})
			},
			//分页数量修改
			pageSizeChange(pageSize) {
				this.page.pageSize = pageSize;
				this.getList();
			},
			//页码修改
			currentPageChange(page) {
				this.page.currentPage = page;
				this.getList();
			},
			//更多查询条件
			moreChange() {
				this.searchFrom["tfId"] = null;
				this.searchFrom["tfName"] = null;
				this.searchFrom["tfCode"] = null;
				this.searchFrom["tfProcessInstanceId"] = null;
				this.searchFrom["tfProcessState"] = null;
			},
		}
	}
</script>
